<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-active="path" style="min-height:100vh">
        <el-menu-item v-for="(item,index) in routes" :key="index" :index="item.path" @click="jump(item.path)">
          <i class="el-icon-arrow-right"></i>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main><router-view /></el-main>
  </el-container>
</template>
<script lang="ts">
import { useRouter,useRoute } from "vue-router";
import {computed} from "vue"
export default {
  setup(){
    const router = useRouter();
    const route = useRoute();
    const path =  computed(() => route.path);
    const routes = router.options.routes;
    const jump = (path: string)=>{ 
      router.push(''+path);
    }
    return {routes,jump,path}
  }
}
</script>
<style lang="scss">
body, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, dt, dd, p, span, div, object, iframe, pre, a, abbr, cite, input, button, select, option {
    margin: 0;
    padding: 0;
    font-weight: normal;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#main{
  display: flex;
  flex-direction: row;
  #nav {
    flex: 2;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f4f5f6;
    .nav{
      line-height: 30px;
      color: #333;
      text-align: center;
      border-bottom: 1px solid #f4f5f6;

    }
    .item{
      line-height: 30px;
      color: #333;
      text-align: center;
      border-bottom: 1px solid #f4f5f6;
      cursor: pointer;
      &.active{
        background-color: green;
        color: #fff;
      }
    }
  }
  #content {
   flex: 8;
   padding: 50px;
  }

}

</style>
